<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            height: 100px;
            width: 1000px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <button>上一页</button>
    <span></span>
    <button>下一页</button>
</body>

</html>
<script src="./promise封装.js"></script>
<script>
    let str = ''
    let box = document.querySelector('.box')
    let btn = document.querySelectorAll('button')
    let span = document.querySelector('span')
    page = 1
    btn[0].disabled = true
    // 封装渲染表情的函数
    function biaoqing() {
        // 调用ajax函数
        ajax('get', 'https://yantianfeng.com/api/emotion', { page: page, count: 10 }).then((data) => {
            console.log(data.emotions);
            str = data.emotions.map(function (item) {
                // console.log(item);
                return `<div><img src="${item.url}"><div class="wenzi">${item.title}</div></div>`
            }).join('')
            console.log(str);
            // for (i = 0; i < data.emotions.length; i++) {
            //     str += data.emotions[i].url
            // console.log(str);
            box.innerHTML = str
            span.innerText = `${page}/4`
            // }
        })
    }
    // 默认显示第一页
    biaoqing()
    // 点击下一页
    btn[1].onclick = function () {
        page++
        biaoqing()
        console.log(page);
        // 禁用和启用按钮
        if (page > 1) {
            btn[0].disabled = false
        }
        if (page == 4) {
            btn[1].disabled = true
        }
    }
    
    // 点击上一页
    btn[0].onclick = function () {
        page--
        biaoqing()
        // 禁用和启用按钮
        if (page < 4) {
            btn[1].disabled = false
        }
        if (page == 1) {
            btn[0].disabled = true
        }
    }
</script>